<script setup>
import { ref, reactive, onMounted } from "vue";
import dayjs from "dayjs";
import orderApi from "@/api/orderApi";
import { Message } from "@arco-design/web-vue";
const loading = ref(false);
const makeGoods = ref([]);
const tomorroMakeGoods = ref([]);
let height = document.body.clientHeight;
const searchParam = reactive({
  shippingDate: "",
});

const expandedKeys = ref([]);
const trExpandedKeys = ref([]);
const todayTotalNum = ref(0);
const trTotalNum = ref(0);
const scrollbar = ref(true);
const scroll = {
  x: 0,
  y: height - 100,
};

const columns = [
  {
    title: "产品",
    dataIndex: "name",
  },
  {
    title: "尺寸",
    dataIndex: "goodsAttr",
    width: 100,
  },
  {
    title: "数量",
    dataIndex: "count",
    width: 100,
  },
  {
    title: "操作",
    slotName: "action",
    width: 100,
  },
];

const rowClassRender = (record, columnIndex) => {
  if (record.children && record.children.length > 0) {
    return "make-product-tree-row";
  }
  return "make-product-row";
};

const dataSpanMethod = ({ record, column }) => {
  if (record.rowSpan && record.rowSpan > 1 && column.dataIndex == 'name') {
    return {
      rowspan: record.rowSpan,
    }
  }
};

const loadOrderGoods = () => {
  let me = this;
  loading.value = true;
  orderApi.queryProductMakeGoods(searchParam).then((res) => {
    if (!res) {
      makeGoods.value = [];
      todayTotalNum.value = 0;
    } else {
      makeGoods.value = res;
      let todayTotalCount = 0;
      res.forEach(item => {
        expandedKeys.value.push(item.id);
        if (item.children && item.children.length > 0) {
          item.children.forEach(child => {
            todayTotalCount = todayTotalCount + child.count;
          })
        }
      })
      todayTotalNum.value = todayTotalCount;
    }
    loading.value = false;
  });
};

const loadTomorroOrderGoods = () => {
  let me = this;
  loading.value = true;
  orderApi
    .queryProductMakeGoods({
      shippingDate: dayjs().add(1, "d").format("YYYY-MM-DD"),
    })
    .then((res) => {
      if (!res) {
        tomorroMakeGoods.value = [];
      } else {
        tomorroMakeGoods.value = res;
        let trTotalCount = 0;
        res.forEach(item => {
          trExpandedKeys.value.push(item.id);
          if (item.children && item.children.length > 0) {
            item.children.forEach(child => {
              trTotalCount = trTotalCount + child.count;
            })
          }
        })
        trTotalNum.value = trTotalCount;
      }
      loading.value = false;
    });
};

const makeGoodSuccess = (record) => {
  orderApi
    .makeGoodSuccess({
      hour: record.hour,
      goodsSn: record.goodsSn,
      goodsAttr: record.goodsAttr,
    })
    .then((res) => {
      Message.success("操作成功");
      loadOrderGoods();
    });
};

loadOrderGoods();
loadTomorroOrderGoods();

onMounted(() => {
  setInterval(() => {
    loadOrderGoods();
    loadTomorroOrderGoods();
  }, 300000);
});
</script>
<template>
  <div class="main-con" style="overflow: hidden; background-color: #fff">
    <a-form :model="searchParam" class="toolbar" layout="inline" ref="orderSearchForm">
      <a-form-item class="mt10" label="送货日期">
        <a-date-picker v-model="searchParam.shippingDate" format="YYYY-MM-DD" placeholder="请选择送货日期"></a-date-picker>
      </a-form-item>
      <a-form-item class="mt10">
        <a-space>
          <a-button type="primary" @click="loadOrderGoods">查询</a-button>
          <a-button @click="loadOrderGoods" icon="el-icon-refresh">刷新</a-button>
          <a-tag style="margin-left: 20px" type="warning">每5分钟自动刷新一次订单，请注意查看新订单</a-tag>
        </a-space>
      </a-form-item>
    </a-form>
    <a-row :gutter="16">
      <a-col :span="12">
        <div style="
            font-size: 20px;
            font-weight: 600;
            color: #000;
            padding-bottom: 10px;
          ">
          今日出库<span>（总量:{{ todayTotalNum }} 个）</span>
        </div>
        <div style="border: 1px solid #f9f9f9">
          <a-table row-key="id" :span-method="dataSpanMethod" span-all :loading="loading"
            v-model:expanded-keys="expandedKeys" :scroll="scroll" :pagination="false" :scrollbar="scrollbar"
            :default-expand-all-rows="true" :sticky-header="true" :columns="columns" :data="makeGoods"
            :row-class="rowClassRender">
            <template #action="{ record }">
              <a-popconfirm content="确认该蛋糕已经做完吗？" @ok="makeGoodSuccess(record)">
                <div class="flex flex-column">
                  <a-tag v-if="!record.maked && record.makeNumber && record.makeNumber > 0" type="info">{{ '已做完' +
                    record.makeNumber + ''
                    }}</a-tag>
                  <a-button size="mini" v-if="!record.maked" type="primary">确认做完</a-button>
                </div>
              </a-popconfirm>
              <icon-check v-if="record.maked" />
            </template>
          </a-table>
        </div>
      </a-col>
      <a-col :span="12">
        <div style="
            font-size: 20px;
            font-weight: 600;
            color: #000;
            padding-bottom: 10px;
          ">
          明日出库<span>（总量:{{ trTotalNum }} 个）</span>
        </div>
        <div style="border: 1px solid #f9f9f9">
          <a-table row-key="id" :span-method="dataSpanMethod" :loading="loading" v-model:expanded-keys="trExpandedKeys"
            :scroll="scroll" :pagination="false" :scrollbar="scrollbar" :default-expand-all-rows="true"
            :sticky-header="true" :columns="columns" :data="tomorroMakeGoods" :row-class="rowClassRender"></a-table>
        </div>
      </a-col>
    </a-row>
  </div>
</template>